<template>
	<view class="container">

		<view>
			<BhTitle :titleText="titleText" :slotHeight="68">
				<BhTabbar :tabList="tabList" :currentTabIndex="currentTabIndex" @changeTab="changeTab"></BhTabbar>
			</BhTitle>
		</view>

		<!-- <BhTitle :titleText="titleText"></BhTitle>
		<BhTabbar :tabList="tabList" :currentTabIndex="currentTabIndex" @changeTab="changeTab"></BhTabbar> -->
		<view class="body-wrap">

			<view @click="toSellDetail(item.id)" v-if="currentTabIndex == 0" v-for="(item, index) in sellList" :key="index">
				<postItemMyCollectSell :item="item"></postItemMyCollectSell>
			</view>
			<view @click="toBuyDetail(item.id)" v-if="currentTabIndex == 1" v-for="(item, index) in buyList" :key="index">
				<postItemMyCollectBuy :item="item"></postItemMyCollectBuy>
			</view>
			<view style="padding-top: 60rpx;" v-if="currentTabIndex == 0 && (!sellList || sellList.length == 0)">
				<bh-no-more></bh-no-more>
			</view>
			<view style="padding-top: 60rpx;" v-if="currentTabIndex == 1 && (!buyList || buyList.length == 0)">
				<bh-no-more></bh-no-more>
			</view>
		</view>
	</view>
</template>

<script>
import {
	Api
} from '../../api/api'
import {
	Dict
} from '../../components/custom_views/dict'
import postItemMyCollectSell from '@/PostPage/post_item/post_item_my_collect_sell.vue'
import postItemMyCollectBuy from '@/PostPage/post_item/post_item_my_collect_buy.vue'
import BhTabbar from '../../components/custom_views/bh-tabbar.vue'
import bhNoMore from '../../components/custom_views/bh-no-more.vue';
import { commonMixin } from '../../components/custom_views/mixin'

export default {
	components: {
		postItemMyCollectSell,
		postItemMyCollectBuy,
		BhTabbar,
		bhNoMore
	},
	mixins: [commonMixin],
	data() {
		return {
			tabList: [
				{
					name: '转铺'
				},
				{
					name: '找铺'
				}
			],
			currentTabIndex: 0,
			tabHeight: 50,
			noMore: false,
			collectList: [],
			titleText: '我的收藏'
		}
	},
	computed: {
		sellList() {
			let that = this
			return that.collectList.filter(post => post.postType == Dict.PostMainTypeEnum.Shop.childs.ShopSell.value)
		},
		buyList() {
			let that = this
			return that.collectList.filter(post => post.postType == Dict.PostMainTypeEnum.Shop.childs.ShopBuy.value)
		},
		images() {
			let images = []
			if (this.postDto.facadePicture) {
				images.push(this.postDto.facadePicture.split(','))
			}
			console.log('images图片信息', images)
			return images
		},
	},
	methods: {
		toSellDetail(id) {
			uni.navigateTo({
				url: '/PostPage/post_detail_sell/post_detail_sell?postId=' + id
			})
		},
		toBuyDetail(id) {
			uni.navigateTo({
				url: '/PostPage/post_detail_buy/post_detail_buy?postId=' + id
			})
		},

		changeTab(changedIndex) {
			console.log('改变tab标签', changedIndex)
			let that = this
			that.currentTabIndex = changedIndex
		},
		initApiData(options, completed = ()=>{}) {
			let that = this
			Api.PostApi.listOfCollect(that, (res) => {
				if (res.code == 200) {
					that.collectList = res.data.records
				}
				completed()
			}, false)
		},
	},
	onPullDownRefresh() {
		let that = this
		that.initApiData({}, () => {
			uni.stopPullDownRefresh();
		})
	},
	watch: {},

	// 页面周期函数--监听页面加载
	onLoad() {
		this.initApiData()
	},
	// 页面周期函数--监听页面初次渲染完成
	onReady() { },
	// 页面周期函数--监听页面显示(not-nvue)
	onShow() { },
	// 页面周期函数--监听页面隐藏
	onHide() { },
	// 页面周期函数--监听页面卸载
	onUnload() { },
	// 页面处理函数--监听用户下拉动作
	// onPullDownRefresh() { uni.stopPullDownRefresh(); },
	// 页面处理函数--监听用户上拉触底
	// onReachBottom() {},
	// 页面处理函数--监听页面滚动(not-nvue)
	// onPageScroll(event) {},
	// 页面处理函数--用户点击右上角分享
	// onShareAppMessage(options) {},
}
</script>

<style scoped lang="scss">
@import url(../../static/css/base.css);

page {
	height: 100vh;
	background-color: #F5F9FA;
}

.container {
	background-color: #F5F9FA;
	width: 100%;
	height: 100vh;
}

.header-wrap {
	// margin-top: 36rpx;
	margin-left: 32rpx;
	margin-right: 32rpx;
	border-radius: 16rpx;
	padding: 8rpx;
	background: #ECF0F1;
	font-size: 36rpx;
	font-weight: 500;
	color: #333333;

	.header-item {
		padding: 22rpx 70rpx;
		border-radius: 16rpx;

		// background: #FFFFFF;
		text-align: center;
	}

	.header-item-ac {
		padding: 22rpx 70rpx;
		border-radius: 16rpx;

		background: #FFFFFF;
	}
}

.header1-wrap {
	margin-top: 16rpx;
	background: #FFFFFF;
	padding-left: 34rpx;
	padding-right: 34rpx;

	.header1-item {
		margin-top: 18rpx;
		margin-bottom: 18rpx;

		.header1-item-title {
			font-size: 32rpx;
			font-weight: normal;

			color: #666666;
		}

		.header1-item-icon {

			width: 0px;
			height: 0px;
			border: 10rpx solid transparent;
			border-top-color: #666666;
			margin-top: 10rpx;
			margin-left: 10rpx;

		}

		.header1-item-title-ac {
			font-size: 36rpx;
			font-weight: 600;

			color: #333333;

		}

		.header1-item-icon-ac {

			width: 0px;
			height: 0px;
			border: 10rpx solid transparent;
			border-top-color: #333333;
			margin-top: 10rpx;
			margin-left: 10rpx;
		}
	}
}

.body-wrap {}
</style>